<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }
      #graphiql {
        height: 100vh;
      }
    </style>

    <meta charset="utf-8" />
    <title>GraphiQL</title>
    <meta name="robots" content="noindex" />
    <link href="//cdn.jsdelivr.net/npm/graphiql@0.14.2/graphiql.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
    <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql@0.14.2/graphiql.js"></script>
    <script src="//cdn.jsdelivr.net/npm/subscriptions-transport-ws@0.8.3/browser/client.js"></script>
    <script src="//cdn.jsdelivr.net/npm/graphiql-subscriptions-fetcher@0.0.2/browser/client.js"></script>
  </head>
  <body>
    <div id="graphiql">Loading...</div>
    <script>
      serialize = function(obj, prefix) {
        var str = [],
          p;
        for (p in obj) {
          if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
              v = obj[p];
            str.push((v !== null && typeof v === "object") ?
              serialize(v, k) :
              encodeURIComponent(k) + "=" + encodeURIComponent(v));
          }
        }
        return str.join("&");
      };

      /**
       * This GraphiQL example illustrates how to use some of GraphiQL's props
       * in order to enable reading and updating the URL parameters, making
       * link sharing of queries a little bit easier.
       *
       * This is only one example of this kind of feature, GraphiQL exposes
       * various React params to enable interesting integrations.
       */
      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search.substr(1).split('&').forEach(function (entry) {
        var eq = entry.indexOf('=');
        if (eq >= 0) {
          parameters[decodeURIComponent(entry.slice(0, eq))] =
            decodeURIComponent(entry.slice(eq + 1));
        }
      });
      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables =
            JSON.stringify(JSON.parse(parameters.variables), null, 2);
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }

      var defaultQuery = `${default_query}`;

      var defaultVariables = `${default_variables}`;
      if (!parameters.variables && defaultVariables !== '') {
        parameters.variables = defaultVariables
      }

      var headers = Object.assign(JSON.parse(`${default_headers}`), {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      });

      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }
      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }
      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }
      function updateURL() {
        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
          return Boolean(parameters[key]);
        }).map(function (key) {
          return encodeURIComponent(key) + '=' +
            encodeURIComponent(parameters[key]);
        }).join('&');
        history.replaceState(null, null, newSearch);
      }
      // Defines a GraphQL fetcher using the fetch API. You're not required to
      // use fetch, and could instead implement graphQLFetcher however you like,
      // as long as it returns a Promise or Observable.
      function graphQLFetcher(graphQLParams) {
        // This example expects a GraphQL server at the path /graphql.
        // Change this to point wherever you host your GraphQL server.
        if ('${http_method}' == 'POST') {
          return fetch('${endpoint}', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(graphQLParams),
            credentials: 'include',
          }).then(function (response) {
            return response.text();
          }).then(function (responseBody) {
            try {
              return JSON.parse(responseBody);
            } catch (error) {
              return responseBody;
            }
          });
        }
        else {
          return fetch('${endpoint}?' + serialize(graphQLParams), {
            method: 'GET',
            headers: headers,
            credentials: 'include',
          }).then(function (response) {
            return response.text();
          }).then(function (responseBody) {
            try {
              return JSON.parse(responseBody);
            } catch (error) {
              return responseBody;
            }
          });
        }
      }

      function buildSubscriptionURL(endpoint) {
        var subscriptionURL = window.location.hostname;
        if (window.location.port !== "") {
          subscriptionURL += ":" + window.location.port;
        }
        var protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
        return protocol + "//" + subscriptionURL + endpoint;
      }

      // Wrap GraphQLFetcher with subscription fetcher if needed.
      var fetcher;
      if (JSON.parse('${is_subscription_enabled}')) {
        var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(
          buildSubscriptionURL('${subscription_ws_endpoint}'),
          {reconnect: true}
        );
        fetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(
          subscriptionsClient, graphQLFetcher
        );
      } else {
        fetcher = graphQLFetcher;
      }

      // Render <GraphiQL /> into the body.
      // See the README in the top level of this module to learn more about
      // how you can customize GraphiQL by providing different values or
      // additional child elements.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: fetcher,
          query: parameters.query || (defaultQuery !== '' ? defaultQuery : undefined),
          variables: parameters.variables,
          operationName: parameters.operationName,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          onEditOperationName: onEditOperationName
        }),
        document.getElementById('graphiql')
      );
    </script>
  </body>
</html>
